import React from 'react'
import { Modal, Button, Card} from 'antd'
import './modales.less'
export default class Modales extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            visible:false,
            visible1:false,
            visible3:false,
            visible4:false
        }
    }
    handleOk = ()=>{
        console.log("点击确认")
        this.setState({
            visible:false
        })
    }
    handleCancel = ()=>{
        console.log("点击取消")
        this.setState({
            visible: false
        })
    }
    render() {
        return <div className="container">
            <Card title="基础模态框" className="card" hoverable={true}>
                <Button type="primary" onClick={()=>{
                    this.setState({
                        visible:true
                    })
                }}>基础模态框</Button>
                <Button onClick={()=>{
                    this.setState({
                        visible1:true
                    })
                }}>之定义页面角</Button>
                <Button type="dashed" onClick={()=>{
                    this.setState({
                        visible3:true
                    })}
                }>顶部20px弹窗</Button>
                <Button type="danger" onClick={() => {
                    this.setState({
                        visible4: true
                    })
                }
                }>水平垂直剧中 </Button>
            </Card>
            {/* 基础框 */}
            <Modal
                title="基础 Modal"
                visible={this.state.visible}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
            >
                <p>这是一个基础modal</p>
            </Modal>
            {/* 自定义页脚 */}
            <Modal
                title="React"
                visible={this.state.visible1}
                okText="好的"
                cancelText="算了"
                onOk={()=>{
                    this.setState({
                        visible1: false
                    })
                }}
                onCancel={() => {
                    this.setState({
                        visible1: false
                    })
                }}
            >
                <p>欢迎学习慕课新推出的React高级课程</p>
            </Modal>
            
            <Modal
                title="React"
                style={{ top: 20 }}
                visible={this.state.visible3}
                onOk={() => {
                    this.setState({
                        visible3: false
                    })
                }}
                onCancel={() => {
                    this.setState({
                        visible3: false
                    })
                }}
            >
                <p>欢迎学习慕课新推出的React高级课程</p>
            </Modal>
            <Modal
                title="React"
                style={{ top: 20 }}
                visible={this.state.visible3}
                onOk={() => {
                    this.setState({
                        visible3: false
                    })
                }}
                onCancel={() => {
                    this.setState({
                        visible3: false
                    })
                }}
            >
                <p>欢迎学习慕课新推出的React高级课程</p>
            </Modal>
            <Modal
                title="React"
                wrapClassName="vertical-center-modal"
                visible={this.state.visible4}
                onCancel={() => {
                    this.setState({
                        visible4: false
                    })
                }}
            >
                <p>欢迎学习慕课新推出的React高级课程</p>
            </Modal>
        </div>
    }
}